<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>部门信息</title>
</head>
	<link href="${ctxPath}/static/theme/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/theme/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- jqgrid-->
    <link href="${ctxPath}/static/theme/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">

    <link href="${ctxPath}/static/theme/css/animate.css" rel="stylesheet">
    <link href="${ctxPath}/static/theme/css/style.css?v=4.1.0" rel="stylesheet">
    
    <link href="${ctxPath}/static/theme/css/plugins/jsTree/style.min.css" rel="stylesheet">
    

<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-3">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h3>部门树</h3>
					</div>
					<div class="ibox-content" id="dept_tree">
						 <div id="jstree"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-9">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<div class="row">
							<form class="form-horizontal" role="form" action="#">
								<div class="row">
									<div class="form-group col-sm-4">
										<label class="col-sm-4 control-label">部门名称:</label>
										<div class="col-sm-8">
											<input type="text" role="search"class="form-control input-sm" name="name" id="name">
										</div>
									</div>
									<div class="form-group col-sm-4">
										<label class="col-sm-4 control-label">部门编码:</label>
										<div class="col-sm-8">
											<input type="text" role="search" class="form-control input-sm" id="no" name="no">
										</div>
									</div>
								</div>
								<div class="row text-center">
									<button type="button" class="btn btn-primary" id="search_dept" onclick="search()">查询</button>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="button" class="btn btn-primary" onclick="eliData()">清空</button>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="button" class="btn btn-primary" onclick="addDept()">新增</button>
									&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
							</form>
						</div>
					</div>
					<div class="ibox-content" id="grid_content">
						<table id="table_data_list"></table>
						<div id="paper_list"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="${ctxPath}/static/theme/js/jquery.min.js"></script>
<script src="${ctxPath}/static/theme/js/bootstrap.min.js"></script>
<!--jqgrid js-->
<script src="${ctxPath}/static/theme/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="${ctxPath}/static/theme/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

<script src="${ctxPath}/static/theme/js/plugins/jsTree/jstree.min.js"></script>
<script src="${ctxPath}/static/theme/js/json2.js"></script>
<script>
	$(function() {
		//在进行jstree初始化菜单前，清空容器
        $('#jstree').data('jstree',false).empty();
        setjstree();
        
		$.jgrid.defaults.styleUI = 'Bootstrap';
		$('#table_data_list').jqGrid({
			datatype : 'json',
			url : "${ctxPath}/dept/findDept",
			mtype : 'POST',
			colNames : [ "编号", "部门编码", "名称", "状态", "是否底层部门", "创建时间", "操作" ],
			colModel : [ {
				name : "id",
				index : "id",
				hidden : true
			}, {
				name : "deptNo",
				title : "deptNo",
				width : 80
			}, {
				name : "name",
				index : "name",
				width : 60
			}, {
				name : "status",
				index : "status",
				width : 60,
				formatter:function (value, grid, rows, state) {
                 	if(value == "1"){
                     	return "正常";
                     }else if(value == "0"){
						return "停用";
                     }
                 }
			}, {
				name : "isLast",
				index : "isLast",
				width : 60,
				formatter:function (value, grid, rows, state) {
                 	if(value == "1"){
                     	return "底级部门";
                     }else if(value == "0"){
						return "非底级部门";
                     }
                 }
			}, {
				name : "createdon",
				index : "createdon",
				width : 60
			}, {
				name : "operation",
				index : "operation",
				width : 60,
				formatter : function(value, grid, rowObject, state) {
					return '<a title="修改" onclick="editInfo(\''+rowObject.id+'\')" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i></a>&nbsp;&nbsp;'+
					'<a title="删除" onclick="delDept(\''+rowObject.id+'\')" class="btn btn-primary btn-xs"><i class="fa fa-remove"></i></a>&nbsp;&nbsp;';
				}
			},
			],
			height : 'auto',
			pager : "#paper_list",
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			multiselect : true,
			shrinkToFit : true,
			viewrecords : true,
			autowidth : true,
			viewrecords : true,
		}).navGrid('#paper_list', {
			del : false,
			edit : false,
			search : false,
			add : false
		}, {
			id : 'myedit'
		});

		// 表格宽度调整
		function jqgridResize(width) {
			$('#table_data_list').setGridWidth(width);
		}
		// 表格宽度初始化
		jqgridResize($('#grid_content').width());
		// 表格宽度自适应
		$(window).bind('resize', function() {
			var width = $('#grid_content').width();
			jqgridResize(width);
		});

		// 监听事件
		$('input[role=search]').bind('keyup', function(event) {
			if (event.keyCode == "13") {
				//回车执行查询
				$('#search_dept').click();
			}

		});
	})

	function search() {
		var name = $('#name').val();
		var no = $('#no').val();
		$("#table_data_list").jqGrid('setGridParam', {
			datatype : 'json',
			page : 1
		});
		$("#table_data_list").jqGrid('setGridParam', {
			postData : {
				name : name,
				no : no
			}
		});
		$("#table_data_list").trigger("reloadGrid");
	}

	/**
	 * 清除查询条件
	 */
	function eliData() {
		$("#contact").val("");
		$("#name").val("");
		$("#address").val("");
	}

	function setjstree() {
        var jstreedate = [];
        $.ajax({
            url: '${ctxPath}/dept/getTree',
            type: 'post',
            dataType: 'json',
            async: false,
            success: function (data) {
                jstreedate = data;
                for (var i in jstreedate) {
                    if (jstreedate[i].parent == 0) {
                        jstreedate[i].parent = "#";
                    }
                }
                console.log(jstreedate);
                $('#jstree').jstree({
                    'core': {
                        'data':  jstreedate,
                    }
                });

            }
        });
      //加载完成后设置打开节点
        $("#jstree").on("loaded.jstree", function (event, data) {
            // 展开所有节点
            $('#jstree').jstree('open_all');
            // 展开指定节点
            //data.instance.open_node(1);     // 单个节点 （1 是顶层的id）
            //data.instance.open_node([1, 10]); // 多个节点 (展开多个几点只有在一次性装载后所有节点后才可行）
        });

      
	$("#jstree").on("changed.jstree", function(e, data) {
			console.log("The selected nodes are:");
			console.log(data.node.id); //选择的node id
			console.log(data.node.text); //选择的node text
		
			$("#table_data_list").jqGrid('setGridParam', {
				datatype : 'json',
				page : 1
			});
			$("#table_data_list").jqGrid('setGridParam', {
				postData : {
					'dptId' : data.node.id,
				}
			});
			$("#table_data_list").trigger("reloadGrid");
		})

	}

	function addDept() {
		console.log("新增部门");
		var postData = $("#table_data_list").jqGrid("getGridParam", "postData");
		console.log("打印数据：" + postData);
		var deptId = "";
		$.each(postData, function(k, v) {
			if (k == "dptId") {
				deptId = v;
			}
		});

		$.ajax({
			type : "post",
			url : "${ctxPath}/dept/check",
			data : {
				id : deptId,
			},
			dataType : "json",
			success : function(response) {
				console.log(response);
				if (response.flag) {
					window.location = "${ctxPath}/dept/addDept?deptId=" + deptId;
				} else {
					alert(response.msg);
				}
			}
		});
	}

	function editInfo(id) {
		window.location = "${ctxPath}/dept/editInfo?id=" + id;
	}

	function delDept(id) {
		if (window.confirm('你确定要删除吗？')) {
			$.ajax({
				type : "post",
				url : "${ctxPath}/dept/delDept",
				data : {
					id : id,
				},
				dataType : "json",
				success : function(response) {
					console.log(response);
					if (response.flag) {
						// 						$.jstree.reference("#jstree").destroy ();
						//在进行jstree初始化菜单前，清空容器
						$('#jstree').data('jstree', false).empty();
						setjstree();
						$('#table_data_list').trigger("reloadGrid");
					} else {
						alert(data.msg);
					}
				}
			});
		} else {
			return false;
		}
	}
</script>
</html>